<template>
    <view class="container">
        <view class="avatar">
            <!-- 上传组件 -->
            <u-upload ref="avatar" name="avatar" maxCount="1" :fileList="filelist" width="120" height="120" @delete="del"
                @afterRead="read" />
        </view>
        <view class="content">
            <u--form labelPosition="left" labelWidth="60" :model="emplist" :rules="rules" ref="profile">
                <!-- 所属部门 -->
                <u-form-item label="部门" prop="group_text" borderBottom @click="showGroup = true">
                    <u--input v-model="emplist.group_text" disabled disabledColor="#ffffff" placeholder="请选择权限组"
                        border="none"></u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <!-- 所属门店 -->
                <u-form-item label="门店" prop="store.name" borderBottom @click="showStore = true">
                    <u--input v-model="emplist.store.name" disabled disabledColor="#ffffff" placeholder="请选择门店"
                        border="none"></u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <!-- 昵称 -->
                <u-form-item label="昵称" prop="nickname">
                    <u--input v-model="emplist.nickname" placeholder="请输入昵称" />
                </u-form-item>
                <u-form-item label="英文昵称" prop="username">
                    <u--input v-model="emplist.username" placeholder="请输入英文昵称" />
                  </u-form-item>
          

                <!-- 手机号 -->
                <u-form-item label="手机号" prop="mobile">
                    <u--input v-model="emplist.mobile" placeholder="请输入手机号" />
                </u-form-item>

                <!-- 邮箱 -->
                <u-form-item label="邮箱" prop="email">
                    <u--input v-model="emplist.email" placeholder="请输入邮箱" />
                </u-form-item>

                <!-- 密码 -->
                <u-form-item label="密码" prop="password">
                    <u--input type="password" v-model="emplist.password" placeholder="请输入密码" />
                </u-form-item>

                <!-- 提交按钮 -->
                <u-button text="添加管理员" icon="pushpin" size="small" type="primary" :customStyle="btnStyle" @click="add" />
            </u--form>
            <u-action-sheet :show="showGroup" :actions="grouplist" title="请选择你所属的部门" @close="showGroup = false"
                @select="groupSelect()">
            </u-action-sheet>
            <u-action-sheet :show="showStore" :actions="stolist" title="请选择你所属门店" @close="showStore = false"
                @select="storeSelect()">
            </u-action-sheet>

            <!-- 消息提醒 -->
            <u-toast ref="notice"></u-toast>
        </view>
    </view>
</template>
  
<script>
export default {
    onLoad() {
        this.auth = this.$u.auth.check();

        this.department();
        this.storelist()
    },
    onReady() {
        //让表单初始化验证规则
        this.$refs.profile.setRules(this.rules);
    },
    created() {

        this.timer = setInterval(() => {

            let a = this.$u.count.check()
            console.log(a)

        }, 15000);

    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    data() {
        return {
            showGroup: false,
            showStore: false,
            filelist: [],
            auth: {},
            grouplist: [],
            empid: 0,
            stolist: [],
            emplist: {
                nickname: "",
                mobile: "",
                group_text: "",
                password: "",
                gid: 0,
                stoid: "",
                store: {
                    name: ""
                }

            },
            gid: 0,
            rules: {
                group_text: {
                    required: true,
                    message: "请选择你所属的权限组",
                    trigger: ["blur", "change"],
                },
                "store.name": {
                    required: true,
                    message: "请选择你所属的门店",
                    trigger: ["blur", "change"],
                },
                nickname: {
                    required: true,
                    message: "请填写昵称",
                    trigger: ["blur", "change"],
                },
                username: {
                    required: true,
                    message: "请填写英文昵称",
                    trigger: ["blur", "change"],
                },
                email: {
                    required: true,
                    type: "email", //uview 自带的验证规则
                    message: "请填写邮箱",
                    trigger: ["blur", "change"],
                },
                mobile: [
                    {
                        required: true,
                        message: "请填写手机号码",
                        trigger: ["blur", "change"],
                    },
                    {
                        //自定义验证器函数，进行手机号码验证
                        validator: (rule, value, callback) => {
                            return uni.$u.test.mobile(value);
                        },
                        message: "手机号码不正确",
                        // 触发器可以同时用blur和change
                        trigger: ["change", "blur"],
                    },
                ],
            },
        };
    },

    methods: {
        // 图片删除
        del() {
            this.filelist = [];
        },
        //图片读取,就是要上传
        async read(event) {
            //组装上传数据
            var data = {
                filePath: event.file.thumb,
                name: "avatar",
                header: {},
                formData: {
                    adminid: this.auth.id,
                },
            };

            //调用接口
            var result = await this.$u.api.admin.avatar(data);

            if (result.code) {
                this.filelist = [{ url: result.data }];

                //修改本地存储中的图像内容
                this.emplist.avatar_text = result.data;
            } else {
                this.$refs.notice.show({
                    type: "error",
                    message: result.msg,
                });
                return false;
            }
        },
        groupSelect(e) {
            this.emplist.group_text = e.name;
            this.emplist.gid = e.id;
            // this.$refs.emplist.validateField('group_text')
        },
        storeSelect(e) {
            this.emplist.store.name = e.name;
            this.emplist.stoid = e.id;
            // this.$refs.emplist.validateField('group_text')
        },
        add() {
            this.$refs.profile
                .validate()
                .then(async () => {
                    var data = {
                        gid: this.emplist.gid,
                        adminid: this.auth.id,
                        nickname: this.emplist.nickname,
                        username: this.emplist.username,
                        mobile: this.emplist.mobile,
                        email: this.emplist.email,
                        stoid: this.emplist.stoid,
                        avatar:this.emplist.avatar_text
                    };


                    if (this.emplist.password) {
                        data.password = this.emplist.password;
                    }

                    let result = await this.$u.api.admin.add(data);

                    if (result.code) {
                        if (this.emplist.avatar) {
                            this.filelist = [{ url: this.emplist.avatar_text }];
                        }
                        this.$refs.notice.show({
                            type: "success",
                            message: result.msg,
                            duration: 1200,
                            complete: () => {


                                //返回上一个界面
                                uni.reLaunch({
                                    url: "/pagesB/employee/permission/auth/index"
                                })
                                // uni.$u.route({
                                // 	type:'navigateBack',
                                // 	delta:1
                                // })

                                return false
                            }

                        })

                    }
                })
                .catch(() => {
                    uni.$u.toast("效验失败");
                });
        },
        async department() {
            let result = await this.$u.api.admin.department();

            if (result.code) {
                this.grouplist = result.data;
            } else {
                this.$refs.notice.show({
                    type: "danger",
                    message: result.msg,
                });
            }
        },
        async storelist() {
            let data = {
                adminid: this.auth.id,
                stoid: this.auth.stoid
            }

            let result = await this.$u.api.product.storelist(data);


            if (result.code) {
                this.stolist = result.data;
            } else {
                this.$refs.notice.show({
                    type: "danger",
                    message: result.msg,
                });
            }
        },
        

    },
};
</script>
  
<style >
.content {
    padding: 20px;
}

.container {
    height: 100%;
    margin: 0 50rpx;
    box-sizing: border-box;
}

.avatar {
    text-align: center;
}

.u-avatar {
    margin: 80rpx auto 40rpx;
}

.xcx {
    width: 200rpx;
    height: 200rpx;
    margin: 80rpx auto 40rpx;
    border-radius: 100%;
    overflow: hidden;
}

.nickname {
    font-size: 14px;
    text-align: center;
}

.title {
    text-align: center;
    margin: 40rpx 0;
    font-size: 14rpx;
}

.avatar .u-upload {
    justify-content: center;
    align-items: center;
    margin: 3em auto;
}
</style>
    
  